<{php}>
$products = $query->getProductsForFuncat();
$allProductsById = $query->getAllProduct();
$cat = $query->getProductCat('fun');
$curCat = [];
foreach($cat as $key => $val ){
if($val['id'] == $id){
    $curCat = $val;
    }
}

$title = $curCat['seo_title'];
$keywords = $curCat['seo_keywords'];
$description = $curCat['seo_description'];
<{/php}>

<{include file="../template/public/head.html"}>

<link rel="stylesheet" type="text/css" href="/static/css/css.css" />
<script type="text/javascript" src="/static/js/jquery.SuperSlide.2.1.1.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $(".hover-fadeIn").mouseover(function (){
            $(this).children('.img-hover-a').hide();
        }).mouseout(function (){
            $(".img-hover-a").show();
        });
    })
</script>
<style type="text/css">
    .full {  width: 100%;  height: 100%;  }
    .page-control {  position: absolute;  top: 50%;  width: 56px;  height: 100px;  margin-top: -50px;  }
    .left {  left: 0;  }
    .right {  right: 0; }
    .about-arrow{ font-size: 50px; clip: auto; overflow: visible; }
    .about-arrow img{ opacity: 0.8; }
    .about-arrow img:hover{ opacity: 1; }
    .bg{ background-color: white; border: 1px solid #eaedf2; }
    .pd-0{padding:0;}



    .pro-banner{
        background:url(<{if condition="isset($config.product_funcat_banner.cvalue)"}><{$config.product_funcat_banner.cvalue}><{/if}>);
        background-size:100% 100%;
    }
    @media (max-width: 1200px) {
        .pro-banner{
            background: url(<{if condition="isset($config.product_funcat_banner.cvalue)"}><{$config.product_funcat_banner.cvalue}><{/if}>) no-repeat center center !important;
        }
    }
    @media (max-width:767px){

        .hover-fadeIn .img-hover{
            opacity: 1;
            position:static;
        }
        .hover-fadeIn .hover-text{
            opacity: 1;
            transform: scale(1,1);
        }
        .hover-fadeIn .hover-text a:first-child{
            opacity:1;
            display:inline;
        }
        .hover-fadeIn .hover-text a {
            display:none;
            color:#666;
        }

    }

</style>


<!-- header-->
<!-- pro_top -->
<{include file="../template/public/union_nav.html"}>
<script>
    $('link').each(function(){
        if($(this).attr('href').indexOf("css/style.css")>0){
            $(this).remove();
            return false;
        }
    });
</script>

<div class="container-fluid">
    <div class="row">
        <div class="banner pro-banner">
            <div class="container">
                <div class="row">
                    <div class="col-sm-7">
                        <div class="text">
                            <h1 class="white"><{if condition="isset($config.product_funcat_title.cvalue)"}><{$config.product_funcat_title.cvalue}><{/if}></h1>
                            <p><{if condition="isset($config.product_funcat_desc.cvalue)"}><{$config.product_funcat_desc.cvalue}><{/if}></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<{if condition="isset($curCat.sub)"}>
<{volist name="$curCat.sub" id="item"}>
<section>
    <div class="container pro-sec">
        <div class="text-center center-block">
            <h1><{$item.name}></h1>
            <a href="<{php}> echo $query->U('index/product/funProductList/id/'.$item['id'],true);<{/php}>" class="more"><{:lang('See more')}></a>
            <p class="head-desc"><{$item.desc}></p>
            <div class="container  case_list">
                <div class="carousel slide" id="slider1" data-ride="carousel">
                    <div class="carousel-inner picScroll-left1" role="listbox">
                        <div class="item active">
                            <div class="row">

                                <{if condition="!empty($products[$item.id])"}>
                                <{volist name="$products[$item.id]" id="in"}>
                                <div class="col-md-4 col-sm-4 col-xs-6 border-right-bold hover-fadeIn pd-0" >
                                    <div class="imgbox">
                                        <a href="<{php}> echo $query->U('index/product/product/id/'.$allProductsById[$in]['id'],true);<{/php}>"><img src="<{$allProductsById[$in]['cover']}>" alt="<{php}>echo $query->alt($allProductsById[$in]['cover']);<{/php}>" class="img-responsive center-block"></a>
                                    </div>
                                    <div class="img-hover-a">

                                    </div>

                                    <div class="img-hover">
                                        <div class="hover-text">
                                            <a href="javascript:;"><{$allProductsById[$in]['name']}></a>
                                        </div>
                                    </div>

                                </div>
                                <{/volist}>
                                <{/if}>
                            </div>
                        </div>
                        <div class="hd">
                            <a class="left page-control next" role="button" data-slide="prev"> <span class="about-arrow"><img src="/static/images/arrow_left.jpg" alt="<{php}>echo $query->alt('/static/images/arrow_left.jpg');<{/php}>"/> </span> </a>
                            <a class="right page-control prev"  role="button" data-slide="next"> <span class="about-arrow"><img src="/static/images/arrow_right.jpg" alt="<{php}>echo $query->alt('/static/images/arrow_right.jpg');<{/php}>"/></span> </a>  </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
</section>
<{/volist}>
<{/if}>

<script type="text/javascript">
    jQuery(".picScroll-left1 ").slide({titCell:".hd ul",mainCell:".item .row",autoPage:true,effect:"leftLoop",autoPlay:true,vis:3,trigger:"click"});
</script>



<{include file="../template/public/sidebar.html"}>
<{include file="../template/public/foot.html"}>